<template>
  <div class="mainbox">
    <div class="m-title main-container">
      <div class="title-box">
        <!-- <div>会议日程</div> -->
        <img src="@/assets/images/rcap@3x.png" alt=""/>
      </div>
      <div class="main-container content-box">
        <!-- 列表 -->
        <div class="c-box">
          <div class="title-line" >
            <div class="date-item" style="color: #fff;font-family: 'AlibabaPuHuiTi-Medium',serif">日期</div>
            <div class="time-item" style="font-family: 'AlibabaPuHuiTi-Medium',serif">时间</div>
            <div class="topic-item" style="font-family: 'AlibabaPuHuiTi-Medium',serif">主题</div>
          </div>
          <div class="row-line" v-for="(item,index) in scheduleList" :key="index">
            <div class="date-item">{{ item.date }}</div>
            <div class="time-item">{{ item.time }}</div>
            <div v-if="Array.isArray(item.topic)" class="topic-item" style="padding: 20px 0">
              <div class="topic-list-item" v-for="(topic, topicIndex) in item.topic" :key="topicIndex">
                {{ topic }}
              </div>
            </div>
            <div v-else class="topic-item">{{ item.topic }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Schedule",
  data() {
    return {
      scheduleList: [
        {date: "2024年5月7日", time: "上下午", topic: "部分技术会议前置举办"},
        {date: "2024年5月7日", time: "下午", topic: "中国机械工业联合会理事会会员会"},
        {date: "2024年5月8日", time: "上午", topic: "2024机械工业发展论坛开幕式主会场"},
        {
          date: "2024年5月8日", time: "下午", topic:
              [
                "主题论坛一:  改变世界的机械一智能机器",
                "主题论坛二:  改变世界的机械一低碳行动",
                "主题论坛三:  改变世界的机械一国际合作",
                "主题论坛四:  改变世界的机械一一流企业与ESG",
                "主题论坛五:  改变世界的机械一产教融合",
                "主题论坛六:  改变世界的机械一服务型制造"]
        },
        {date: "2024年5月9日", time: "上下午", topic: "其他分会场活动"},
      ]
    }
  },

};
</script>

<style scoped>

.mainbox {
  flex: 1;
  padding-top: 34px;
  padding-bottom: 81px;

}

.m-title {
  margin-bottom: 34px;
}

.layui-main {
  position: relative;
  /* width: 1160px; */
  margin: 0 auto;
}

.title-box {
  margin-top: 32px;
  margin-bottom: 41px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title-box img {
  width: 399px;
  height: 86px;
}

.title-box div:nth-child(1) {
  font-size: 40px;
  font-weight: 800;
  color: #243042;
  margin: 17px 0;
}

/*
.title-box::after {
  display: block;
  content: "";
  width: 60px;
  height: 2px;
  background: #0c2c84;
  border-radius: 1px;
} */
.content-box {
  /* min-height: 600px; */
  box-shadow: 0 0 30px 0 rgba(15, 59, 130, 0.12);
  border-radius: 20px;
  border-width: 0;
  border-style: solid;
  background-color: #fff;
  border-color: #eee;
  color: #5f5f5f;
  font-size: 20px;
  /* height: 575px; */
}


.c-box {
  display: flex;
  flex-direction: column;
}

.title-line {
  display: flex;
  height: 64px;
  line-height: 64px;
  padding-left: 84px;
  color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  /* background-color: #407EFF; */
  background-color: #0E2F81;
  /* width: 100%; */
}

.row-line {
  display: flex;
  min-height: 64px;
  line-height: 64px;
  padding-left: 84px;
  color: #333333;
  /* width: 100%; */

}
.row-line:last-child {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.row-line:nth-child(even) {
  background-color: #ECF2FF;
}

.row-line:nth-child(odd) {
  background-color: #ffffff;
}

.date-item {
  flex: 1;
  color: #004CEA;
  font-family: "AlibabaPuHuiTi-Regular",serif;
}

.time-item {
  flex: 1;
  font-family: "AlibabaPuHuiTi-Regular",serif;
}

.topic-item {
  width: 575px;
  line-height: 20px;
  margin: auto;
  font-family: "AlibabaPuHuiTi-Regular",serif;
}

.topic-list-item {
  padding-bottom: 20px;
  font-family: "AlibabaPuHuiTi-Regular",serif;
}

.topic-list-item:last-child {
  padding-bottom: 0 !important;
}
</style>